<template>
  <div class="w-full h-full flex flex-col gap-4 text-sm text-fontPrimary bg-windowBg">
    <!-- 外观设置 -->
    <ThemeModel title="外观设置" :themeColors="themeColors" />
    <!-- 系统 -->
    <SystemItem title="系统">
      <div class="flex flex-row items-center justify-between pb-2" style="border-bottom: 1px solid var(--border)">
        <div>关闭主面板</div>
        <el-radio-group v-model="WindowTabCloseType" class="flex-1 justify-end items-end">
          <el-radio value="mini">最小到系统托盘</el-radio>
          <el-radio value="close"> 直接退出程序</el-radio>
        </el-radio-group>
      </div>
      <div class="flex flex-row items-center justify-between pt-2">
        <div>关闭是否显示提示</div>
        <el-switch v-model="IsRememberExitType" />
      </div>
    </SystemItem>
    <!-- 翻译设置 -->
    <SystemItem title="翻译设置">
      <div class="flex felx-row items-center justify-between">
        <div>翻译提供商</div>
        <el-select v-model="TranslationProvider" placeholder="Select" style="width: 140px">
          <el-option v-for="item in TranslateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </SystemItem>
  </div>
</template>

<script setup lang="ts">
import SystemItem from "../components/SystemItem.vue";
import { useSystem } from "@/store/modules/system";
import { Etheme } from "@/types/common";
import { IThemeColors } from "@/types/system";
import { storeToRefs } from "pinia";
import ThemeModel from "../components/ThemeModel.vue";

let { IsRememberExitType, WindowTabCloseType, TranslationProvider } = storeToRefs(useSystem());

const TranslateList = [
  {
    key: "1",
    label: "百度翻译",
    value: "1",
  },
  {
    key: "2",
    label: "腾讯翻译",
    value: "2",
  },
];

const themeColors: IThemeColors[] = [
  {
    label: "白天模式",
    name: Etheme.Light,
    color: "bg-light",
  },
  {
    label: "夜间模式",
    name: Etheme.Dark,
    color: "bg-dark",
  },
  {
    label: "跟随系统",
    name: Etheme.Os,
    color: "",
  },
];
</script>

<style lang="scss" scoped></style>
